<template>
  <UnobstructedPopup v-if="value">
    <template v-slot:body>
      <view style="height: 100%;overflow: hidden;display: flex;flex-direction: column;">
        <scroll-view scroll-y>
          <u-collapse :item-style="itemStyle" :head-style="headStyle" @change="collapseChange">
            <u-collapse-item :title="templateItem.name" v-for="templateItem in inquiryTemplateList"
              :key="templateItem.templateId" :name="templateItem.templateId"
              :open="formData.activeCollapse == templateItem.templateId">
              <view v-for="question in templateItem.archivesQuestionsList" :key="question.questionId">
                <view class="item question" :class="isQuestionActive(question) ? 'active' : ''"
                  @click="assignmentQuestion(question)">
                  <view>
                    <text>问：{{ question.question }}</text>
                  </view>
                </view>
                <view class="item answer" @click="assignmentAnswer(question)">答：{{ question.answer }}</view>
              </view>
            </u-collapse-item>
          </u-collapse>
        </scroll-view>
      </view>
    </template>
  </UnobstructedPopup>
</template>

<script>

import { moduleMap, MODULE_DICTID } from '@/const/modules/index.js'

import { findStrIndex } from '@/utils/index';

import UnobstructedPopup from '@/components/unobstructed-popup/unobstructed-popup.vue'
export default {
  components: { UnobstructedPopup },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => ({})
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.inquiryTemplateList = newVal
        }
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      inquiryTemplateList: [],
      questionList: [],
      formData: {}
    }
  },
  computed: {
    itemStyle() {
      return {
        borderBottom: '2rpx solid #EBEEF5'
      }
    },
    headStyle() {
      return {
        lineHeight: 1.5,
        color: '#303133'
      }
    },
    isQuestionActive() {
      return (question) => {
        let findItem = this.questionList.find(item => item.questionId == question.questionId && item.temId == question.temId)
        if (findItem && question.temId == findItem.temId) {
          return findItem
        }
      }
    },
  },
  async created() {
    // #ifdef APP-PLUS

    // #endif
  },
  methods: {
    collapseChange(e) {
      console.log(e);
      // this.formData.activeCollapse = e
    },
    // 笔录填充
    async assignmentQuestion(item) {
      this.$emit('assignmentQuestion', item)
      return
      let temItem = this.questionList.find(tem => tem.questionId == item.questionId && tem.temId == item.temId)
      if (temItem) {
        const arr = this.questionList;
        arr.forEach((tem, index) => {
          if (tem.questionId == item.questionId) {
            const start = findStrIndex(this.formData.content, '问：', index);
            const end = findStrIndex(this.formData.content, '问：', index + 1);
            const startIndex = start > 0 ? start : 0;
            const endIndex = end > 0 ? end : this.formData.content.length;
            this.formData.content.substring(start, end);
            let str = this.formData.content.replace(this.formData.content.substring(startIndex != 0 ? startIndex - 1 : startIndex, endIndex), '');
            this.questionList.splice(index, 1);
            this.$set(this.formData, 'content', str)
            this.$refs.piaoyiEditor.update(str)
            setTimeout(() => {
              this.$refs.piaoyiEditor.saveContens()
            })
          }
        });
      } else {
        this.questionList.push({
          questionId: item.questionId,
          temId: item.temId
        });
        let str = (this.formData.content || '') + `${!this.formData.content ? '' : '\n'}` + '问：' + item.question.trim() + '\n答：';
        this.$set(this.formData, 'content', str)
        this.$refs.piaoyiEditor.update(str)
        setTimeout(() => {
          this.$refs.piaoyiEditor.saveContens()
        })
      }
    },
    assignmentAnswer(item) {
      this.$emit('assignmentAnswer', item)
      return
      let str = (this.formData.content || '') + item.answer;
      this.$set(this.formData, 'content', str)
      this.$refs.piaoyiEditor.update(str)
      setTimeout(() => {
        this.$refs.piaoyiEditor.saveContens()
      })
    },
  }
}
</script>
<style scoped lang="scss">
.item {
  padding: 6rpx;
  background-color: #f1f2f3;
  line-height: 52rpx;
  font-size: 24rpx;
  color: #000;
  padding-left: 10rpx;
  margin-bottom: 12rpx;

  &.question {
    color: blue;
  }

  &.answer {
    color: #333;
  }

  &.active {
    background-color: #74b0ef;
    color: #fff;
  }
}
</style>